<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" :currentData="currentData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="当日数据" name="1">
    </el-tab-pane>
    <el-tab-pane label="当月数据" name="2">
    </el-tab-pane>
    <!-- <raddar-chart v-if="charShow" /> -->
    <div v-for="(item,index) in charDataObj" :key="index">
      <!-- {{ item }} -->
      <line-chart
          v-if="charShow"
          :chartTitle="item.deptName"
          :chart-data="item.data"
          :chart-config="chartConfig"
          height="400px"
        />
    </div>
  </el-tabs>

    </el-row>


    
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {getBiBsOrderDeptDashboardData,getBiBsOrderDashboardData} from '@/api/liangshi/order'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      charShow:false,
      activeName: '1',
      currentData:{},
      lineChartData: lineChartData.newVisitis,
      charDataObj:[],
      chartConfig: {
        xAxisData: [],
        legendData: [
          "出餐数量",
          "出餐耗时",
          "平均耗时"
        ],
      },
    }
  },
  created(){
    this.getChartData();
    this.getCurrentData();
  },
  methods: {
    getCurrentData(){
      getBiBsOrderDashboardData().then(res=>{
        this.currentData=res.currentData
      })
    },
    getChartData(){
      this.charShow=false;
      this.charDataObj=[]
      this.chartConfig.xAxisData=[]
      getBiBsOrderDeptDashboardData({type:this.activeName}).then(res=>{
        var keys=Object.keys(res.listMap);
        keys.forEach(key=>{
          var timeData=[];
          var dishesCount=[];
          var consumeTime=[];
          var avgTime=[];
          res.listMap[key].forEach(item=>{
            timeData.push(item.time);
            dishesCount.push(item.dishesCount);
            consumeTime.push(item.consumeTime);
            avgTime.push(item.avgTime);
          })
          this.chartConfig.xAxisData=timeData;
          this.charDataObj.push({deptName:key,data:[
            {name:'出餐数量',data:dishesCount},
            {name:'出餐耗时',data:consumeTime},
            {name:'平均耗时',data:avgTime}
          ]})
        })
        this.charShow=true;
      })

    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    handleClick(tab, event) {
        this.getChartData();
      }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
